<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset="utf-8">
  <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
  <link rel="match" href="masonry-grid-item-self-baseline-001-ref.html">
  <style>
html,body {
    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
}
body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }

.grid {
  float: left;
  display: grid;
  grid: masonry / repeat(4, auto);
  place-items: start;
  padding-block-start: 1px;
  margin-left: 1px;
  border:1px solid;
}
.c {
  grid: repeat(4, auto) / masonry;
}

span {
  text-decoration: underline lime;
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
  text-decoration-skip-ink: none;
  background: grey;
}
.central > span { text-decoration-line: line-through; }
x { display:block; visibility:hidden; }
span:nth-child(1) { font-size:10px; }
span:nth-child(2) { font-size:15px; }
span:nth-child(3) { font-size:25px; }
span:nth-child(4) { font-size:30px; }
.pbe { padding-block-end:20px; }
.pbs { padding-block-start:20px; }

.fb { align-self:baseline; }
.lb { align-self:last baseline; }

.jfb { justify-self:baseline; }
.jlb { justify-self:last baseline; }

.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vll { writing-mode: vertical-lr; direction:ltr; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.vrr { writing-mode: vertical-rl; direction:rtl; }
.swl { writing-mode: sideways-lr; }
.swr { writing-mode: sideways-rl; }

</style>
</head>
<body>

<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>

<br clear="all">

<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>

<br clear="all">

<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
<!-- TODO: baseline alignment affects intrinsic inline size
<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
-->
<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
<!-- TODO
<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
-->
<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>

<br clear="all">

<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>

<br clear="all">

<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>

</body>
</html>
